জাভাস্ক্রিপ্ট DOM ফর্ম হলো ওয়েব পেজের ফর্ম উপাদানগুলির সাথে ইন্টারঅ্যাক্ট করার একটি পদ্ধতি। DOM ফর্মের মাধ্যমে ডেভেলপাররা ফর্মের ইনপুট, সিলেক্ট, চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদি উপাদানগুলিকে নিয়ন্ত্রণ, ভ্যালিডেট এবং পরিচালনা করতে পারে। এটি ব্যবহারকারীর ইনপুট সংগ্রহ এবং প্রক্রিয়াকরণের জন্য অত্যন্ত গুরুত্বপূর্ণ।

DOM ফর্মের উপাদানসমূহ

ইনপুট ফিল্ড (Input Fields)

ইনপুট ফিল্ড হলো ব্যবহারকারীর কাছ থেকে ডেটা সংগ্রহের প্রধান উপায়। বিভিন্ন ধরনের ইনপুট ফিল্ড রয়েছে, যেমন টেক্সট, পাসওয়ার্ড, ইমেল, নম্বর ইত্যাদি।

<form id="myForm">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">Submit</button>
</form>
Copy

সিলেক্ট বক্স (Select Box)

সিলেক্ট বক্স ব্যবহার করে ব্যবহারকারীকে নির্দিষ্ট অপশনগুলোর মধ্যে থেকে একটি বা একাধিক অপশন নির্বাচন করার সুযোগ দেয়।

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="bangladesh">Bangladesh</option>
    <option value="india">India</option>
    <option value="usa">USA</option>
</select>
Copy

চেকবক্স (Checkbox)

চেকবক্স ব্যবহার করে ব্যবহারকারীকে একাধিক অপশন নির্বাচন করার সুযোগ দেয়।

<label>
    <input type="checkbox" name="hobby" value="reading"> Reading
</label>
<label>
    <input type="checkbox" name="hobby" value="traveling"> Traveling
</label>
<label>
    <input type="checkbox" name="hobby" value="coding"> Coding
</label>
Copy

রেডিও বাটন (Radio Button)

রেডিও বাটন ব্যবহার করে ব্যবহারকারীকে একক অপশন নির্বাচন করার সুযোগ দেয়।

<label>
    <input type="radio" name="gender" value="male"> Male
</label>
<label>
    <input type="radio" name="gender" value="female"> Female
</label>
Copy

DOM ফর্মের সাথে জাভাস্ক্রিপ্ট ব্যবহার

ফর্ম নির্বাচন করা

ফর্ম উপাদানকে DOM থেকে নির্বাচন করতে বিভিন্ন পদ্ধতি ব্যবহার করা হয়, যেমন getElementById, querySelector ইত্যাদি।

const form = document.getElementById('myForm');
// অথবা
const form = document.querySelector('#myForm');
Copy

ফর্মের ইভেন্ট হ্যান্ডল করা

ফর্মের ইভেন্টগুলি যেমন submit, input, change ইত্যাদি ইভেন্ট হ্যান্ডল করা যায়।

ফর্ম সাবমিট ইভেন্ট

ফর্ম সাবমিট ইভেন্টের মাধ্যমে ব্যবহারকারীর ইনপুট সংগ্রহ এবং প্রক্রিয়াকরণ করা যায়।

form.addEventListener('submit', function(event) {
    event.preventDefault(); // ফর্মের ডিফল্ট সাবমিট অ্যাকশন থামানো

    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    
    console.log('Username:', username);
    console.log('Email:', email);
    
    // এখানে ইনপুট ভ্যালিডেশন এবং ডেটা প্রক্রিয়াকরণ করা যেতে পারে
});
Copy

ইনপুট ডেটা অ্যাক্সেস করা

ফর্মের ইনপুট ডেটা অ্যাক্সেস করার জন্য বিভিন্ন পদ্ধতি রয়েছে।

const username = form.elements['username'].value;
const email = form.elements['email'].value;

// অথবা
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
Copy

ফর্ম ডেটা ভ্যালিডেশন

ফর্ম ডেটার ভ্যালিডেশন নিশ্চিত করে যে ব্যবহারকারী সঠিক এবং প্রয়োজনীয় তথ্য প্রদান করেছে।

form.addEventListener('submit', function(event) {
    event.preventDefault();

    const username = form.elements['username'].value;
    const email = form.elements['email'].value;
    
    if (username.trim() === '') {
        alert('Username is required.');
        return;
    }
    
    if (!validateEmail(email)) {
        alert('Please enter a valid email.');
        return;
    }
    
    // ডেটা প্রক্রিয়াকরণ
});

function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(String(email).toLowerCase());
}
Copy

ফর্ম উপাদান পরিবর্তন করা

ফর্মের উপাদানগুলিকে ডাইনামিকভাবে পরিবর্তন করা যায়, যেমন মান সেট করা, ফিল্ড অক্ষম করা ইত্যাদি।

// ইনপুট ফিল্ডে মান সেট করা
document.getElementById('username').value = 'NewUser';

// ইনপুট ফিল্ড অক্ষম করা
document.getElementById('email').disabled = true;
Copy

উদাহরণ: একটি সম্পূর্ণ DOM ফর্ম ম্যানিপুলেশন

নিচে একটি সম্পূর্ণ উদাহরণ দেওয়া হলো যা একটি ফর্মের মাধ্যমে ব্যবহারকারীর ইনপুট সংগ্রহ, ভ্যালিডেশন এবং ডাইনামিক পরিবর্তন প্রদর্শন করে।

<!DOCTYPE html>
<html>
<head>
    <title>DOM Form Example</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Registration Form</h1>
    <form id="registrationForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <span id="usernameError" class="error"></span>
        <br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <span id="emailError" class="error"></span>
        <br><br>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <span id="passwordError" class="error"></span>
        <br><br>
        
        <button type="submit">Register</button>
    </form>
    
    <div id="successMessage" style="color: green; display: none;">
        Registration successful!
    </div>
    
    <script>
        const form = document.getElementById('registrationForm');
        const usernameError = document.getElementById('usernameError');
        const emailError = document.getElementById('emailError');
        const passwordError = document.getElementById('passwordError');
        const successMessage = document.getElementById('successMessage');
        
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            
            // ফর্ম ডেটা সংগ্রহ
            const username = form.elements['username'].value.trim();
            const email = form.elements['email'].value.trim();
            const password = form.elements['password'].value.trim();
            
            let isValid = true;
            
            // ভ্যালিডেশন
            if (username === '') {
                usernameError.textContent = 'Username is required.';
                isValid = false;
            } else {
                usernameError.textContent = '';
            }
            
            if (email === '') {
                emailError.textContent = 'Email is required.';
                isValid = false;
            } else if (!validateEmail(email)) {
                emailError.textContent = 'Please enter a valid email.';
                isValid = false;
            } else {
                emailError.textContent = '';
            }
            
            if (password === '') {
                passwordError.textContent = 'Password is required.';
                isValid = false;
            } else if (password.length < 6) {
                passwordError.textContent = 'Password must be at least 6 characters.';
                isValid = false;
            } else {
                passwordError.textContent = '';
            }
            
            if (isValid) {
                // সফল সাবমিট
                successMessage.style.display = 'block';
                form.reset();
            } else {
                successMessage.style.display = 'none';
            }
        });
        
        function validateEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(String(email).toLowerCase());
        }
    </script>
</body>
</html>
Copy

এই উদাহরণে:

• একটি রেজিস্ট্রেশন ফর্ম রয়েছে যা ব্যবহারকারীর নাম, ইমেইল এবং পাসওয়ার্ড সংগ্রহ করে।
• ফর্ম সাবমিট করার সময় জাভাস্ক্রিপ্ট ইনপুট ভ্যালিডেট করে এবং ত্রুটির বার্তা দেখায়।
• যদি সব ইনপুট ভ্যালিড হয়, তাহলে সফল বার্তা প্রদর্শিত হয় এবং ফর্ম রিসেট করা হয়।
• ভ্যালিডেশন ফাংশন validateEmail ব্যবহার করে ইমেইল ঠিকানা সঠিক কিনা পরীক্ষা করা হয়।

সারাংশ

জাভাস্ক্রিপ্ট DOM ফর্ম ব্যবহার করে ওয়েব পেজের ফর্ম উপাদানগুলিকে নিয়ন্ত্রণ এবং ম্যানিপুলেট করা সম্ভব। DOM ফর্মের মাধ্যমে ডেভেলপাররা ব্যবহারকারীর ইনপুট সংগ্রহ, ভ্যালিডেশন এবং প্রক্রিয়াকরণ করতে পারে, যা ওয়েব অ্যাপ্লিকেশনকে ডাইনামিক এবং ইন্টারঅ্যাকটিভ করে তোলে। বিভিন্ন DOM মেথড, প্রোপার্টি এবং ইভেন্ট হ্যান্ডলার ব্যবহার করে ফর্মের উপাদানগুলিকে কার্যকরভাবে নিয়ন্ত্রণ করা যায়, যা উন্নত এবং ব্যবহারকারী-বান্ধব অভিজ্ঞতা প্রদান করে।